<template>
  <div class="body_all">
    <div class="ba_top">
      <div>
        <el-input
          style="width:15%"
          v-model="searchList.kw"
          placeholder="企业名称/电话"
          size="mini"
        ></el-input>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="btnSearch"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
      </div>
      <div style="margin-top: 8px">
        <el-button
          v-if="searchList.sea == 1"
          :disabled="!(multipleSelection.length > 0)"
          type="primary"
          size="mini"
          class="el-icon-document-add"
          @click="receive()"
          >领取公海</el-button
        >
        <el-button
          v-else
          :disabled="!(multipleSelection.length > 0)"
          type="primary"
          size="mini"
          class="el-icon-document-copy"
          @click="distribution()"
          >分配公海</el-button
        >
        <!-- <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="showEditer(0)"
          >新增客户</el-button
        >
        <el-button
          type="edit"
          icon="el-icon-edit-outline"
          size="mini"
          @click="showEditer(1)"
          >编辑</el-button
        >
        <el-button type="del" icon="el-icon-delete" size="mini">删除</el-button>
        <el-button type="down" size="mini">模板下载</el-button>
        <el-button type="import" icon="el-icon-download" size="mini"
          >导入</el-button
        >
        <el-button type="out" icon="el-icon-upload2" size="mini"
          >导出</el-button
        > -->
      </div>
    </div>
    <div class="ba_main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="线下公海" name="offline"></el-tab-pane>
        <el-tab-pane plain label="离职公海" name="quit"></el-tab-pane>
        <!-- <el-button
          :type="offlineType == 0 ? 'primary' : ''"
          size="mini"
          @click="offlineType = 0"
          >客户</el-button
        >
        <el-button
          :type="offlineType == 1 ? 'primary' : ''"
          size="mini"
          @click="offlineType = 1"
          >企业</el-button
        > -->
      </el-tabs>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        height="250"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="customer_name" label="企业名称" flex="left">
        </el-table-column>
        <el-table-column prop="name" label="联系人名称" flex="left">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="100">
        </el-table-column>
        <el-table-column prop="area" label="地址" width="360">
        </el-table-column>
        <el-table-column prop="source_title" label="来源" width="100">
        </el-table-column>
        <el-table-column prop="tag_name" label="标签" width="100">
        </el-table-column>
        <!-- <el-table-column prop="tag_name" label="行业类型" show-overflow-tooltip>
        </el-table-column> -->
        <!-- <el-table-column prop="date" label="人员规模"> </el-table-column> -->
        <!-- <el-table-column prop="date" label="企业等级"> </el-table-column> -->
        <!-- <el-table-column prop="name" label="联系人数量"> </el-table-column>
        <el-table-column prop="date" label="联系人"> </el-table-column>
        <el-table-column prop="date" label="共享人"> </el-table-column>
        <el-table-column prop="name" label="最近联系记录"> </el-table-column>
        <el-table-column prop="date" label="销售机会"> </el-table-column> -->
        <el-table-column prop="owner_user" label="负责人" width="180">
        </el-table-column>
        <el-table-column prop="create_user" label="创建人" width="180">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间">
        </el-table-column>
      </el-table>
      <div class="footer">
        <span style="margin-right: 10px">共{{ datanumber }}条</span>
        <!-- <span>当前第{{ searchList.page }}页共有{{ tableData.length }}条</span> -->
        <span :class="searchList.page == 1 ? 'ban_btn_no' : ''">
          <i
            class="el-icon-arrow-left operable"
            :class="searchList.page == 1 ? 'pageOff' : 'pageOn'"
            @click="prevPage"
          ></i>
        </span>
        <div style="display: inline; margin: 0 10px">
          <el-input
            :title="searchList.page"
            style="width: 60px"
            v-model="searchList.page"
            @change="sizechange()"
            size="mini"
          ></el-input>
          <span style="margin: 0 5px 0 15px">/</span>
          <span>{{ pagenumber == 0 ? "1" : pagenumber }}</span>
        </div>
        <span :class="seenumber > datanumber ? 'ban_btn_no' : ''">
          <i
            class="el-icon-arrow-right operable"
            :class="seenumber > datanumber ? 'pageOff' : 'pageOn'"
            @click="nextPage"
          ></i>
        </span>
        <span style="margin-left: 10px">每页</span>
        <el-select
          style="width: 70px"
          v-model="searchList.size"
          @change="sizechange()"
          placeholder="请选择"
          size="mini"
        >
          <el-option
            v-for="item in sizennList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
        条
      </div>
    </div>
    <!-- 分配对话框 -->
    <el-dialog title="选择分配人" :visible.sync="selPersonnel" width="35%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="personnelUserid"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分配人" prop="personnelUserid"
          ><el-select
            v-loading="!shareing"
            class="main-select-tree"
            ref="selectTree"
            v-model="ruleForm.personnelUserid"
            style="width: 80%"
          >
            <el-option
              v-if="shareing"
              v-for="item in formatData(personnelList)"
              :key="item.id"
              :label="item.name"
              :value="item.value"
              style="display: none"
            />
            <el-tree
              v-if="shareing"
              class="main-select-el-tree"
              ref="selecteltree"
              :data="personnelList"
              node-key="id"
              highlight-current
              :props="defaultProps"
              @node-click="handleNodeClick"
              :current-node-key="ruleForm.personnelUserid"
              :expand-on-click-node="expandOnClickNode"
              default-expand-all
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="foot_btn">
        <el-button @click="resetForm('personnelUserid')">取 消</el-button>
        <el-button type="primary" @click="submitForm('personnelUserid')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      dialogEditer: false,
      selPersonnel: false, // 选择分配人员窗口状态
      personnelUserid: "", // 指定的分配人员
      personnelList: [], // 分配人员下拉数据
      expandOnClickNode: true,
      shareing: false,
      options: [],
      multipleSelection: [],
      // 搜索条件
      searchList: {
        page: 1,
        size: "20",
        sea: 1,
        kw:"",
      },
      sizennList: [{ value: 20 }, { value: 50 }, { value: 100 }],
      defaultProps: {
        children: "childlist",
        label: "name",
      },
      datanumber: "0",
      seenumber: "0",
      pagenumber: "0",
      activeName: "offline",
      ruleForm: {
        personnelUserid: "",
      },
      rules: {
        personnelUserid: [
          { required: true, message: "请选择分配人", trigger: "change" },
        ],
      },
      // 线下公海-类型
      offlineType: 0,
      tableData: [],
    };
  },
  created() {
    this.loading = true;
    this.getData();
  },
  methods: {
    // 三级菜单
    formatData(data) {
      let options = [];
      data.forEach((item, key) => {
        if (item.childlist) {
          item.childlist.forEach((items, keys) => {
            if (items.childlist) {
              items.childlist.forEach((itemss, keyss) => {
                options.push({
                  id: keys + "_" + keyss,
                  name: itemss.name,
                  value: itemss.userid ? itemss.userid : "",
                });
              });
            }
          });
        }
      });
      return options;
    },
    // 获取分配数据
    getdistribution() {
      this.$cmsapi.departmentList().then(
        (res) => {
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i].disabled = true;
              if (res.data[i].childlist) {
                for (let j = 0; j < res.data[i].childlist.length; j++) {
                  var number_bm = res.data[i].childlist.length;
                  var number_ry = 0;
                  res.data[i].childlist[j].disabled = true;
                  // 通过部门ID寻找所属人员并赋值
                  this.$cmsapi
                    .departmentUserList({
                      department_id: res.data[i].childlist[j].id,
                    })
                    .then(
                      (resCilder) => {
                        if (resCilder.code == 0) {
                          // 将数据添加到对应数组
                          res.data[i].childlist[j].childlist = resCilder.data;
                          number_ry = number_ry + 1;
                          if (number_ry == number_bm) {
                            this.personnelList = res.data;
                            this.relationData();
                          }
                        } else {
                          this.$message.error(resCilder.msg);
                        }
                      },
                      (err) => {
                        console.log(err);
                      }
                    );
                }
              }
            }
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 处理树结构数据关联-用于共享人树结构展开
    relationData() {
      // 顶层
      for (let i = 0; i < this.personnelList.length; i++) {
        this.personnelList[i].id = this.guid();
        // 部门
        if (this.personnelList[i].childlist) {
          for (let j = 0; j < this.personnelList[i].childlist.length; j++) {
            this.personnelList[i].childlist[j].id = this.guid();
            this.personnelList[i].childlist[j].parentid =
              this.personnelList[i].id;
            // 人员
            if (this.personnelList[i].childlist[j].childlist) {
              for (
                let k = 0;
                k < this.personnelList[i].childlist[j].childlist.length;
                k++
              ) {
                this.personnelList[i].childlist[j].childlist[k].parentid =
                  this.personnelList[i].childlist[j].id;
              }
            }
          }
        }
      }
      this.shareing = true;
    },
    // 获取随机的id数据
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    handleNodeClick(node) {
      this.ruleForm.personnelUserid = node.userid;
      this.$refs.selectTree.blur();
    },
    // 获取列表数据
    getData() {
      this.$cmsapi.seaList(this.searchList).then(
        (res) => {
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              for (const key in res.data[i]) {
                if (!res.data[i][key] && res.data[i][key] !== 0) {
                  res.data[i][key] = "";
                }
              }
            }
            this.seenumber = this.searchList.size * this.searchList.page;
            this.datanumber = res.count;
            this.pagenumber = Math.ceil(res.count / this.searchList.size);
            this.tableData = res.data;
          } else {
            this.$message.error(res.msg);
          }
          this.loading = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 最大条数变化
    sizechange() {
      this.loading = true;
      this.getData();
    },
    //上一页
    prevPage() {
      this.loading = true;
      this.searchList.page -= 1;
      this.getData();
    }, // 下一页
    nextPage() {
      this.loading = true;
      this.searchList.page += 1;
      this.getData();
    },
    // 搜索
    btnSearch(){
      this.loading = true;
      this.getData();
    },
    // 条件重置
    btnRefresh() {
      this.loading = true;
      this.searchList.kw = this.$options.data().searchList.kw;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(tab, event) {
      this.loading = true;
      this.activeName = tab.name;
      this.searchList.sea = parseInt(tab.index) + 1;
      this.getData();
    },
    // 领取公海
    receive() {
      this.loading = true;
      let number_end = this.multipleSelection.length - 1;
      for (let i = 0; i < this.multipleSelection.length; i++) {
        let ids = this.multipleSelection[i].id;
        this.$cmsapi.getOpenSea(ids).then(
          (res) => {
            if (res.code == 0) {
              if (i == number_end) {
                this.$message({
                  type: "success",
                  message: "领取成功",
                });
                this.getData();
              }
            } else {
              this.$message.error(res.msg);
              this.loading = false;
            }
          },
          (err) => {
            console.log(err);
          }
        );
      }
    },
    // 分配公海
    distribution() {
      this.getdistribution();
      this.selPersonnel = true;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.selPersonnel = false;
    },
    // 新增编辑
    showEditer(obj) {
      this.$router.push({
        path: "/index/addCustomerData",
        query: obj,
      });
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let number_end = this.multipleSelection.length - 1;
          for (let i = 0; i < this.multipleSelection.length; i++) {
            let param = {
              ids: this.multipleSelection[i].id,
              owner_userid: this.ruleForm.personnelUserid,
            };
            this.$cmsapi.planOpenSea(param).then(
              (res) => {
                if (res.code == 0) {
                  if (i == number_end) {
                    this.$message({
                      type: "success",
                      message: "分配成功",
                    });
                    this.getData();
                    this.selPersonnel = false;
                  }
                } else {
                  this.$message.error(res.msg);
                  this.loading = false;
                }
              },
              (err) => {
                console.log(err);
              }
            );
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
</style>